<template>
	<div>
		<el-form :inline="true">
					<el-form-item>
						<el-button type="primary" @click="centerDialogVisible = true">新增</el-button>
					</el-form-item>
				</el-form>
		<el-table
			:data="tableData"
			style="width: 100%;margin-bottom: 20px"
			row-key="id"
			border
			stripe
			default-expand-all
			:tree-props="{children: 'children', hasChildren: 'hasChildren'}">
		>
			<el-table-column
				prop="name"
				label="名称"
				sortable
				width="180"
			>
				
			</el-table-column>
			<el-table-column
				prop="perms"
				label="权限编码"
				sortable
				width="180"
			>
				
			</el-table-column>
			<el-table-column
				prop="icon"
				label="图标"
				
			>
				
			</el-table-column>
			<el-table-column
				prop="type"
				label="类型"
			>
				<template v-slot="scope">
					<el-tag size="small" v-if="scope.row.type ===0"> 目录</el-tag>
					<el-tag size="small" v-if="scope.row.type ===1" type="success"> 菜单</el-tag>
					<el-tag size="small" v-if="scope.row.type ===2" type="info"> 按钮</el-tag>
				</template>
			</el-table-column>
			<el-table-column
				prop="path"
				label="菜单URL"
			>
				
			</el-table-column>
			<el-table-column
				prop="component"
				label="菜单组件"
			>
				
			</el-table-column>
			<el-table-column
				prop="orderNum"
				label="排序号"
			>
				
			</el-table-column>
			<el-table-column
				prop="statu"
				label="状态"
			>
				<template v-slot="scope">
					<el-tag size="text" v-if="scope.row.statu ===1" type="success"> 正常</el-tag>
					<el-tag size="text" v-else-if="scope.row.statu ===0" type="danger"> 禁用</el-tag>
				</template>
			</el-table-column>
			<el-table-column
				prop="address"
				label="操作"
				sortable
				width="200"
			>
				<template v-slot="scope">
					<el-button size="text" @click="editHandle(scope.row.id)"> 编辑</el-button>
					<el-divider direction="vertical"></el-divider>
					<el-popconfirm title="确定删除这条记录吗?" @confirm="delhandle(scope.row.id)">
					    <template #reference>
					      <el-button size="text">删除</el-button>
					    </template>
					  </el-popconfirm>
				</template>
			</el-table-column>
		
		</el-table>
		<el-dialog
		  v-model="centerDialogVisible"
		  title="title"
		  width="500"
		  :before-close="handleClose"
		  align-center
		>
			<el-form
			   ref="editFormRef"
			   style="max-width: 600px"
			   :model="editForm"
			   :rules="editFormRules"
			   label-width="auto"
			   class="demo-editForm"
			   :size="formSize"
			   status-icon
			 >
			 <el-form-item label="上级菜单" prop="parentId" label-width="100px">
			    <el-select v-model="editForm.parentId" placeholder="请选择上级菜单">
						<template v-for="item in tableData" >
							<el-option :lable='item.name' :value="item.name"></el-option>
							<template v-for='child in item.children'>
								<el-option :lable='child.name' :value="child.name">
									<span>{{'-'+child.name}}</span>
								</el-option>
								
							</template>
						</template>
			    </el-select>
			  </el-form-item>
			  <el-form-item label="菜单名称" prop="name" label-width="100px">
			       <el-input v-model="editForm.name" 	autocomplete="off"/>
			  </el-form-item>
			  <el-form-item label="权限编码" prop="perms" label-width="100px">
			       <el-input v-model="editForm.perms" autocomplete="off"/>
			  </el-form-item>
			   <el-form-item label="图标" prop="icon" label-width="100px">
			        <el-input v-model="editForm.icon" autocomplete="off" />
			   </el-form-item> 
			   <el-form-item label="菜单URL" prop="path" label-width="100px">
			        <el-input v-model="editForm.path" autocomplete="off" />
			   </el-form-item>
			   <el-form-item label="菜单组件" prop="component" label-width="100px">
			        <el-input v-model="editForm.component" autocomplete="off" />
			   </el-form-item>
			   <el-form-item label="类型" prop="type" label-width="100px">
			        <el-radio-group v-model="editForm.type">
							 <el-radio :label="0">目录</el-radio>
							 <el-radio :label="1">菜单</el-radio>
							 <el-radio :label="2">按钮</el-radio>
						 </el-radio-group>
			   </el-form-item>
			   <el-form-item label="状态" prop="statu" label-width="100px">
			        <el-radio-group v-model="editForm.statu">
			   		 <el-radio :label="0">禁用</el-radio>
			   		 <el-radio :label="1">正常</el-radio>
			   	 </el-radio-group>
			   </el-form-item>
			   <el-form-item label="排序号" prop="orderNum" label-width="100px">
			        <el-input-number v-model="editForm.orderNum" :min='1' label="排序号">1</el-input-number>
			   </el-form-item>
			   <el-form-item label-width='260px'>
						<el-button type='primary' @click="subitForm('editForm')">创建</el-button>
						<el-button  @click="reseForm('editForm')">重置</el-button>
				</el-form-item>
			   
			 </el-form>
			 
		</el-dialog>
	</div>
</template>

<script setup>
	import axios from 'axios';
	import { valid } from 'mockjs';
	import { ElMessage } from 'element-plus'
	import{reactive, ref,getCurrentInstance}from'vue'
	import { useRouter } from 'vue-router'
	const editFormRules={
		parentId:[
			{required:true,message:'请选择上级菜单',trigger:'blur'}
		],
		name:[
			{required:true,message:'请输入名称',trigger:'blur'}
		],
		perms:[
			{required:true,message:'请输入权限编码',trigger:'blur'}
		],
		type:[
			{required:true,message:'请选择状态',trigger:'blur'}
		],
		orderNum:[
			{required:true,message:'请填入排序号',trigger:'blur'}
		],
		statu:[
			{required:true,message:'请选择状态',trigger:'blur'}
		],
	}
	const tableData=reactive([])
	let editForm=reactive({})
	let centerDialogVisible = ref(false)
	let getMenuTree= async ()=>{
		try{
			return await axios.get('/sys/menu/list').then(res=>{
				// userifo=res.data.datan
				Object.assign(tableData,res.data.data)
				
			}
				
			)
		}catch (e){
			return await e
		}
	}
	
	const ruleForm = reactive({
	      parentId: '',
	      name: '',
	      perms: '',
		  type:'',
		  orderNum:'',
		  statu:'',
	    })
	const router=useRouter()
	const {proxy} = getCurrentInstance()
	const subitForm =async(formName) => {		
			await proxy.$refs.editFormRef.validate((valid)=>{
				if(valid){
					axios.post('/sys/menu/'+(editForm.id?'update':'save'),editForm).then(res=>{
						 ElMessage({
						    message: 'Congrats, this is a success message.',
						    type: 'success',
						    plain: true,
							onclose:()=>{
								getMenuTree()
							}
							
						  })
						centerDialogVisible.value=false
						  
					})
				}})}
	const editHandle=async(id)=>{
		
		await axios.get('/sys/menu/info'+id).then(res=>{
			Object.assign(editForm,res.data.data)
			
			
			centerDialogVisible.value=true
			
					}
		)
	}
	const reseForm=()=>{
		proxy.$refs.editFormRef.resetFields()
		centerDialogVisible.value=false
		editForm=''
		
		console.log(editForm)
	}
	const handleClose=()=>{
		reseForm('editForm')
	}
	const delhandle=(id)=>{
		axios.post('/sys/menu/delete/'+id).then(res=>{
			ElMessage({
			   message: 'Congrats, this is a success message.',
			   type: 'success',
			   plain: true,
			   onclose:()=>{
				getMenuTree()}			
			 })
		})
	}
	getMenuTree()
	
</script>

<style scoped>
</style>